<template>
	<view>
		<!-- 顶部导航栏 -->
		<myheader ></myheader>
		
		<mumu-get-qrcode @success="qrcodeSucess" @error="qrcodeError" :continue="false">
			<template v-slot:error>
				<view>摄像头启动失败</view>
			</template>
		</mumu-get-qrcode>
		<!-- share弹窗 -->
		<view class="share" :class="shareClass" @touchmove.stop.prevent="discard" @tap="hideShare">
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="h1">核销信息</view>
				<view class="list">姓名：{{name}}</view>
				<view class="list">电话：{{phone}}</view>
				<view class="list">券ID：{{order_no}}</view>
				<view class="list">活动标题：{{item_name}}</view>
				<view class="list">登记时间：{{Cdate}}</view>
			<view class="btn" @tap="hexiao">
				核销
			</view>
				<view class="btn" @tap="hideShare">
					取消
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
import mumuGetQrcode from '@/components/mumu-getQrcode/mumu-getQrcode.vue'
export default {
	components: {
		mumuGetQrcode
	},
	data() {
	
		return {
			name:'测试员',
			phone:'测试员',
			order_no:'测试员',
			Cdate:'测试员',
			item_name:'测试员',
			key:'',
			shareClass:'',
			}
	},
	onLoad() {
		//this.qrcodeSucess('FEB92D51DD5797A1C193FEAC95F1A9CC');
	},
	methods: {
		qrcodeSucess(data) {
			//alert(data);
			this.key=data;
			let token = uni.getStorageSync('token_valid')
			uni.request({
				url: "https://bg.jswbgz.com/post/copoun_order:get_copoun_code_info", //仅为示例，并非真实接口地址。
				data: {
					key: data,
					token: token,
		
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				method: 'post',
				success: (res) => {
					uni.hideLoading()
					console.log(res)
					const _res = JSON.stringify(res.data);
					this.share()
					//alert(_res)
					if (res.data.success) {
		               this.name=res.data.data.user_name;
					   this.phone=res.data.data.phone;
					   this.order_no=res.data.data.order_no;
					   this.item_name=res.data.data.item_name;
					   this.Cdate=res.data.data.create_time;
					} 
					else if (res.data.msg == "登录已失效，请重新登录"||res.data.msg == "用户不存在") {
					this.$logout()
					}
					 else {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						});
					}
				},
				fail: (res) => {
					uni.showToast({
						title: "登录失败",
						icon: "none"
					});
					console.log('set error:' + JSON.stringify(e));
				}
			});
		},
		qrcodeError(err) {
			console.log(err)
			uni.showModal({
				title: '摄像头授权失败',
				content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
				success: () => {
					uni.navigateBack({})
				}
			})
		}
	// 分享
	,share(){
		this.shareClass = 'show';
	},
	hideShare(){
		this.shareClass = 'hide';
		setTimeout(() => {
			this.shareClass = 'none';
			uni.redirectTo({
				url: '../../pages/Index/index'
			});
		}, 150);
		
	},
	hexiao(){
		let token = uni.getStorageSync('token_valid')
		uni.request({
			url: "https://bg.jswbgz.com/post/copoun_order:hx_copoun_code", //仅为示例，并非真实接口地址。
			data: {
				key: this.key,
				token: token,
				
			},
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			method: 'post',
			success: (res) => {
				uni.hideLoading()
				console.log(res)
				let _res = JSON.stringify(res.data);
				this.share()
				//alert(_res)
				if (res.data.success) {
		        if(res.data.data.code==1){
					uni.showModal({
						title: '核销',
						content: '核销成功',
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
							uni.navigateTo({
								url: '../../pages/Index/index'
							}) 
							}
						}
					});
					
				}
				else{
					uni.showToast({
						title: res.data.data.msg,
						icon: "none"
					});
					
				}
				} 
				else if (reslut.data.msg == "登录已失效，请重新登录"||reslut.data.msg == "用户不存在")
				{
					this.$logout();
				}
				 else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			fail: (res) => {
				uni.showToast({
					title: "登录失败",
					icon: "none"
				});
				console.log('set error:' + JSON.stringify(e));
			}
		});
		
	}
	}
}
</script>

<style lang="scss">
	@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
	
	
	.share{
		display: none;
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.15s linear both;
			}
			.layer {
				animation: showLayer 0.15s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.15s linear both;
			}
			
			.layer {
				animation: hideLayer 0.15s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			background-color: rgba(0,0,0,.5);
			position: fixed;
			width: 100%;
			height: 100%;
			top:0;
			z-index: 11;
		}
		.layer{
			width: 92%;
			position: fixed;
			z-index: 12;
			padding: 0 4%;
			top: 100%;
			background-color: #fff;
			.list{
				width: 100%;
				display: flex;
				padding:10upx 0 30upx 0;
				.box{
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					image{
						width: 13.8vw;
						height: 13.8vw;
					}
					.title{
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}
			.btn{
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}
			.h1{
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}
		}
	}
	
</style>
